﻿<div class="map" id='mapDiv'></div>
<script type="text/javascript">
	$(window).load(function () {
		var map = GetMap(document.getElementById("mapDiv"), { center: new Microsoft.Maps.Location(-16.12, 45.6), zoom: 4 });

		var updatePoints = function () {
			var center = map.getCenter();
			$.getJSON('/project/ByLocation', { 'longitude': center.longitude, 'latitude': center.latitude }, function (data) {
				map.entities.clear();
				$.each(data.points, function (idx, item) {
					var loc = new Microsoft.Maps.Location(item.lat, item.lon);
					var pin = new Microsoft.Maps.Pushpin(loc);
					map.entities.push(pin);
				});
			});
		};

		var mapChange;

		Microsoft.Maps.Events.addHandler(map, 'viewchangeend', function () {
			if (mapChange) { clearTimeout(mapChange); }
			mapChange = setTimeout(updatePoints, 500);
		});
	});
</script>